<script>
    // 冲销明细模态表单页
    Vue.component('future-details-report', {
        template: `
<el-dialog :title="type == 10 ? '预收款' : '预付款'" :visible.sync="dialogShow" width="1200px" @close="closeModal">
 <div class="recordListBox">
    <el-card class="box-card" style="cursor: initial;">
        <div slot="header" class="clearfix">
            <el-form :inline="true"  class=" recordSearchForm" style="border:0">

            <el-form-item size="mini">
                <el-cascader
                     collapse-tags clearable
                     v-model="se_cate"
                        :props="{ checkStrictly: true }"
                     :options="categoryListForOptions"></el-cascader>
            </el-form-item>

            <el-form-item size="mini">
            <el-select placeholder="全部状态" clearable filterable default-first-option v-model="state" @change="selectDisposeCode" filterable>
            <el-option
            v-for="item in tallyStates"
            :key="item.id"
            :label="item.title"
            :value="item.id">
            </el-option>
            </el-select>
            </el-form-item>
            <el-form-item size="mini">
            <el-select placeholder="客户/供应商" clearable filterable default-first-option v-model="store_id"  @change="selectDisposeCode">
            <el-option
            v-for="item in storeList"
            :key="item.id"
            :label="item.title"
            :value="item.id">
            </el-option>
            </el-select>
            </el-form-item>
            <el-form-item size="mini">
            <el-select  placeholder="员工" clearable filterable default-first-option v-model="member_id" @change="selectDisposeCode">
            <el-option
            v-for="item in memberList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
            </el-select>
            </el-form-item>
            <el-form-item size="mini">
            <el-input placeholder="备注关键字" v-model="memo"></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" @click="handleRecordPageChange(1)"> 查询</el-button>

        </el-form>
            <div style="margin-bottom:20px">
                <p class="frBtn" style="font-size:18px;font-weight:bold;color:red">未核销金额:{{money_show2}}</p>
                <p class="frBtn" style="font-size:18px;font-weight:bold;color:red">已核销金额:{{money_show1}}</p>
                <p class="frBtn" style="font-size:18px;font-weight:bold;color:red">总金额:{{money_show}}</p>

            </div>
        </div>
        <div class="recordSearchBox" style="cursor: initial;">
        </div>
        <div class="recordTable">
        <template>
        <el-table :data="recordList" border stripe  style="cursor: initial;">
        <el-table-column type="index">
        </el-table-column>

        <el-table-column prop="tally_time" sortable width="150px;" label="账单日期">
        <template slot-scope="scope">
        <p>
        <span>{{ scope.row.tally_time.substring(0,10) }}</span>
        </p>
        </template>
        </el-table-column>


        <el-table-column prop="category_name" sortable width="150px;" label="分类">
        <template slot-scope="scope">
            <p>{{ scope.row.category_ppname != '' ? scope.row.category_ppname : scope.row.category_pname }}-{{ scope.row.category_ppname != '' ? scope.row.category_pname :scope.row.category_name }} </p>
        </template>
        </el-table-column>

        <el-table-column prop="state_txt" label="账单状态"></el-table-column>
         <el-table-column prop="account_name" label="总金额">
        <template slot-scope="scope">
        <p v-if="scope.row.type==10" class="amount-in">
        <span>{{ scope.row.amount }}</span>
        </p>
        <p v-if="scope.row.type==20" class="amount-out">
        <span>{{ scope.row.amount }}</span>
        </p>
        </template>
        </el-table-column>
        <el-table-column prop="account_name1" label="未核销">
        <template slot-scope="scope">
        <p v-if="scope.row.type==10" class="amount-in">
        <span>{{ scope.row.amount_remain }}</span>
        </p>
        <p v-if="scope.row.type==20" class="amount-out">
        <span>{{ scope.row.amount_remain }}</span>
        </p>
        </template>
        </el-table-column>
        <el-table-column prop="account_name" label="累计核销">
        <template slot-scope="scope">
        <p v-if="scope.row.type==10" class="amount-in">
        <span>{{ scope.row.all_price }}</span>
        </p>
        <p v-if="scope.row.type==20" class="amount-out">
        <span>{{ scope.row.all_price }}</span>
        </p>
        </template>
        </el-table-column>




        <el-table-column prop="account_name" label="当月核销">
        <template slot-scope="scope">
        <p v-if="scope.row.type==10" class="amount-in">
        <span>{{ scope.row.now_price }}</span>
        </p>
        <p v-if="scope.row.type==20" class="amount-out">
        <span>{{ scope.row.now_price }}</span>
        </p>
        </template>
        </el-table-column>


        <el-table-column prop="store_name" width="100px" label="客户/供应商"></el-table-column>
        <el-table-column prop="member_name" label="员工"></el-table-column>
        <el-table-column prop="memo" label="备注"></el-table-column>
        </el-table>
        <p style="margin-top: 10px;text-align: center">
            <el-pagination
            :current-page="currentPage"
            background
            layout="prev, pager, next, total"
            :page-size="recordListPage.pageSize"
            :total="recordListPage.totalCount"
            @current-change="handleRecordPageChange"
            >
            </el-pagination>
        </p>
        </template>
        </div>
        </el-card>
    </div>
</el-dialog>
    `,
        props: ['dialog-show', 'type','project_id','begin_date','end_date','category_parent_id'],
        computed: {
            categoryListIn() {
                return this.$store.state.categoryListIn
            },
            categoryListOut() {
                return this.$store.state.categoryListOut
            },
            categoryList() {
                if(this.type==10) return this.categoryListIn
                if(this.type==20) return this.categoryListOut
                return [];
            },
            categoryListForOptions(){
                console.log(this.categoryListIn)
                let options = []
                let origin_datas = this.categoryList;
                for (let i=0;i<origin_datas.length;i++){
                    if(origin_datas[i]['children']===undefined){
                        continue;
                    }
                    let itemData = {
                        'label':origin_datas[i]['title'],
                        'value':origin_datas[i]['id'],
                        'children':[]
                    };
                    for (let a = 0;a<origin_datas[i]['children'].length;a++){
                        let itemVItem = {
                            'label':origin_datas[i]['children'][a]['title'],
                            'value':origin_datas[i]['children'][a]['id'],
                        };
                        if(origin_datas[i]['children'][a]['children'] !== undefined){
                            itemVItem['children'] = [];
                            for (let z=0;z<origin_datas[i]['children'][a]['children'].length;z++){
                                itemVItem['children'].push({
                                    'label':origin_datas[i]['children'][a]['children'][z]['title'],
                                    'value':origin_datas[i]['children'][a]['children'][z]['id'],
                                });
                            }
                        }
                        itemData['children'].push(itemVItem);
                    }
                    options.push(itemData);
                }
                return options;
            },
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally() {
                return this.$store.state.currentTally
            },
            accountList() {
                return this.$store.state.accountList
            },
            customList () {
                return this.$store.state.customList
            },
            gysList () {
                return this.$store.state.gysList
            },
            storeList() {
                return this.gysList.concat(this.customList)
            },
            memberList() {
                return this.$store.state.memberList
            },
        },
        watch: {
            dialogShow:{
                handler (newVal) {},
                deep:true,
                immediate: true
            }
        },
        data:function(){
            return {
                se_cate:[],
                recordDialog:false,
                recordForm:{},
                tallyStates:[
                    {id:1,title:'待核销'},
                    {id:2,title:'核销中'},
                    {id:3,title:'核销完毕'}
                ],
                recordList:[],
                project_id:'',
                account_id:'',
                store_id:'',
                member_id:'',
                currentPage:1,
                state:'',
                money_show:'0.00',
                money_show1:'0.00',
                money_show2:'0.00',
                memo:'',
                recordListPage:{
                    pageSize:10,
                    totalCount:0,
                },
            }
        },
        methods:{
            selectDisposeCode(){
                this.$forceUpdate()
            },
            handleRecordPageChange(currentPage){
                this.currentPage = currentPage
                this.getRecordList()
            },
            closeModal(){
                let that = this
                that.account_id = ''
                that.store_id = ''
                that.member_id = ''
                that.currentPage = 1;
                that.recordListPage = {
                    pageSize:10,
                    totalCount:0,
                }
                that.recordList = []
                that.memo = ''
                that.money_show = '0.00'
                that.money_show1 = '0.00'
                that.money_show2 = '0.00'
                this.set_cate = []
                this.$emit('modalClose')
            },
            modalClose(){
                this.recordDialog = false
            },
            initData() {
                this.getRecordList()
            },
            refresh() {
                this.getRecordList()
            },

            getRecordList(){
                let that = this
                let getParams = {
                    tally_id:that.currentTallyId,
                    begin_date:that.begin_date,
                    end_date:that.end_date,
                    project_id:that.project_id,
                    page:that.currentPage,
                    account_id:that.account_id,
                    store_id:that.store_id,
                    member_id:that.member_id,
                    type:that.type,
                    memo:that.memo,
                    state:that.state
                }
                if(this.se_cate.length != 0){
                    getParams['category_route_like'] = this.se_cate[this.se_cate.length-1];
                }

                if(this.category_parent_id != undefined){
                    getParams['category_parent_id'] = this.category_parent_id;
                }


                axios.get('/api/tally-stat-report/future-count-debt-rean',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: getParams
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        console.log(that.type == 10)
                        that.money_show = res.data.data['money_show'];
                        that.money_show1 = res.data.data['money_show1'];
                        that.money_show2 = res.data.data['money_show2'];
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
                axios.get('/api/tally-future/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: getParams
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.recordList = res.data.data.data
                        that.recordListPage = res.data.data.pageInfo
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
        }
    })
</script>
